<template>
  <div class="login" @click="bigFou">
    <div class="login_main">
        <div class="login_logo">
        	<img src="../../assets/img/login_logo.png">
        </div>
        <div class="login_box">
          <h1 class="login_title">祖龙娱乐BI系统</h1> 
          <div class='tabbed skin-green-sea round' id='skinable' v-show = "!switchAccountShow">
            <ul>
              <li @click="chooseId(0)" :class="{'active':!account}">OA账号登录</li>
              <li @click="chooseId(1)" :class="{'active':account}">BI账号登录</li>
            </ul>
          </div>
          <transition-group name="el-zoom-in-center" tag="div"  mode="out-in" class="login_animat" v-show = "!switchAccountShow">
            <div class="login_info" v-show="account" :key="0">
              <div class="input_row username" >
                <input type="text"  ref="searchInput1" class="login_id" placeholder="请输入BI账号" @focus="userFocus" @blur="userBlur()" v-model="username" @click="userCli($event)" v-on:keyup.tab="showPw" maxlength="18">
              </div>
              <p v-text="userPd" class="user_pd"></p>
              <div class="input_row password">
                <input ref="searchInput2"  type="password" class="login_pw" placeholder="请输入密码" @focus="pwFocus" @blur="pwBlur()" v-model="pw" @mouseout="pwMouse()"  @click="pwCli($event)" v-on:keyup.enter="show">
              </div>
              <p v-text="pwPd" class="pw_pd"></p>
              <div class="remember">
                <el-checkbox-group v-model="rememberValue" @change="rememberPassword">
                  <el-checkbox>记住密码</el-checkbox>
                </el-checkbox-group>
              </div>
              <input type="button" autofocus="" ref="searchInput3" class="login_btn btn_access" value="登录" @click="loginIn()" :class="{pointer: ispointer}" id="submit" >
            </div>
            <div class="login_oa" v-show="!account" :key="1">
              <iframe class="login_iframe" id="login_iframe" src="http://sso-test.zulong.com/acs_sso/view/5?appid=zlbiweb_OA&callback=http://bi.zulong.com" frameborder="0" scrolling="no" width="400px" height="335px"></iframe>
            </div>
          </transition-group> 
          <div class="switchAccount" v-show="switchAccountShow">
              <button @click="switchAccountShow=false">切换账号/注销</button>
              <h1>该用户没有该系统权限！请申请开通权限！</h1>  
          </div>
        </div>
    </div>

  </div>
</template>
<style>
   @import './login.css';
</style>
<script src="./login.js"></script>
